<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" href="./css/index.css">
    <style type="text/css">
        #logo {
            width: 300px;
            height: 100%;
            background-color: aquamarine;
            float: left;
            /* text-align: center; */

        }

        #logo img {
            width: 240px;
            height: 70px;
            /* margin: 32px 30px; */
            position: relative;
            top: 32px;
            left: 30px;
        }

        #search {
            width: 1100px;
            height: 100%;
            float: left;
        }

        #bean {
            width: 200px;
            height: 100%;
            background-color: rgb(7, 173, 229);
            float: right;
            background: url(https://m.360buyimg.com/babel/jfs/t1/306335/9/4387/173406/004f0601F093ecfc9/aed6fb3f8a6871b2.gif ) no-repeat center center;
            background-size: 160px 70px;
        }

        #search .form {
            position: relative;
            top: 30px;
            left: 50px;
            width: 784px;
            height: 44px;
            border: 2px solid #ff0f23;
            box-sizing: border-box;
            background: #fff;
            border-radius: 8px;
        }

        #search .form input {
            width: 600px;
            height: 90%;
            border: none;
            outline: none;
            margin-left: 30px;
            padding-top: 2px;
            ;
            font-size: 16px;
        }

        #search .form button {
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 6px;
            border: #fff 2px solid;
            width: 100px;
            height: 100%;
            color: #fff;
            background-color: #da0909;
        }

        #search .form span {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 20px;
            color: transparent;
            background: url(http://img12.360buyimg.com/imagetools/jfs/t1/217403/22/44880/1174/670e0640F3236a0eb/a277335c97c54895.png) 50% / contain no-repeat;
            cursor: pointer;
        }

        #hot {
            margin: 30px 0 0 50px;
            width: 784px;
            height: 20px;

        }

        #hot ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        /* #hot li {
            height: 100%;
            line-height: 20px;
            float: left;
            width: 60px;
            text-align: center;
        } */
    </style>
</head>

<body>
    <div id="container">
        <div id="shortcut">
            <div class="w">
                <ul id="fl">
                    <li class="fl_1">中国大陆版 - 山西 <i class="iconfont"></i></li>
                    <li class="spacer"></li>
                    <li class="fl_2">你好，<span class="fl_2_red">请登录</span> 免费注册</li>
                    <li class="spacer"></li>
                    <li class="fl_3"><a href="#">切换至企业版</a></li>
                </ul>
                <ul id="fr">
                    <li><svg>
                            <use xlink:href="#icon_my_cart"></use>
                        </svg>
                        <div class="my-cart-red-dot"></div>购物车
                    </li>
                    <li>关于我们</li>
                    <li>服务项目</li>
                    <li>联系我们</li>
                </ul>
            </div>
        </div>
        <div id="header">
            <div class="w">
                <div id="logo"><img src="images/2.png"></div>
                <div id="search">
                    <div class="form">
                        <input name="search" type="text" placeholder="搜索商品名称、商品编号">
                        <span></span>
                        <button type="submit">搜索</button>
                    </div>
                    <div id="hot">
                        <ul>
                            <li><a href="#">手机</a></li>
                            <li><a href="#">电脑</a></li>
                            <li><a href="#">家电</a></li>
                            <li><a href="#">图书</a></li>
                            <li><a href="#">服装</a></li>
                            <li><a href="#">鞋靴</a></li>
                            <li><a href="#">箱包</a></li>
                            <li><a href="#">母婴</a></li>
                            <li><a href="#">服装</a></li>
                            <li><a href="#">鞋靴</a></li>
                            <li><a href="#">箱包</a></li>
                            <li><a href="#">母婴</a></li>
                        </ul>
                    </div>
                </div>
                <div id="bean"></div>
            </div>
        </div>
        <div id="firstscreen">

        </div>
    </div>
    <div id="right_img">
        <img src="images/1.jpg" alt="Right Image">
    </div>
</body>

</html>